<template>
  <section class="todoapp">
    <TodoHerder></TodoHerder>
    <TodoMain
      :todoList="store.filterTodoList"
      :isAllDone="store.isAllDone"
    ></TodoMain>
    <TodoFooter
      :todoList="store.filterTodoList"
      :unDoneNumber="store.unDoneNumber"
      :visibility="store.visibility"
    >
    </TodoFooter>
  </section>
</template>

<script setup lang="ts">
import { watchEffect } from "vue";
import useTodoStore from "./stores/useTodoStore";
import TodoFooter from "./components/TodoFooter.vue";
import TodoHerder from "./components/TodoHerder.vue";
import TodoMain from "./components/TodoMain.vue";
import useLocal from "./hooks/useLocalData";
import { TodoListType } from "./types/todomvc";

const store = useTodoStore();
watchEffect(() => {
  // 类似于Vuex 的abscribe  只要有state 的变化就会走这个函数
  store.$subscribe((_, state) => {
    useLocal("todomvc", state.todoList as TodoListType);
  });
});
</script>

<style scoped></style>
